:root{
  --bg:#f7f7f9;
  --card:#fff;
  --accent:#3b82f6;
}
body{font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);margin:0;padding:20px}
.app{max-width:800px;margin:0 auto}
.nav{display:flex;gap:12px;margin-bottom:16px}
.nav a{color:var(--accent);text-decoration:none}
.page{background:var(--card);padding:16px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.add-todo{display:flex;gap:8px;margin-bottom:12px}
.add-todo input{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px}
.add-todo button{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:4px}
.todo-list{list-style:none;padding:0;margin:0}
.todo-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-bottom:1px solid #f0f0f0}
.todo-item.completed span{text-decoration:line-through;color:#888}
.todo-item .remove{background:transparent;border:none;color:#888;font-size:18px}

/* Responsive layout styles */
.app-root{min-height:100vh;background:var(--bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(90deg,#ffffff,#fbfdff);border-bottom:1px solid rgba(2,6,23,0.04);position:sticky;top:0;z-index:40}
.topbar .brand{font-weight:700;color:#0f172a;text-decoration:none;margin-left:8px}
.topbar-left{display:flex;align-items:center;gap:12px}
.hamburger{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;font-size:18px;cursor:pointer}
.topnav{display:flex;gap:14px}
.topnav a{color:var(--accent);text-decoration:none;padding:6px 8px;border-radius:6px}

/* Desktop: grid with sidebar + main */
.layout{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:24px;max-width:1200px;margin:0 auto;align-items:start}
.sidebar{background:var(--card);border-radius:10px;padding:12px;box-shadow:0 1px 4px rgba(2,6,23,0.04);height:fit-content}
.sidebar ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.sidebar a{text-decoration:none;color:#334155}
.main{min-height:60vh}

/* mobile */
@media (max-width: 768px){
  .layout{display:block;padding:12px}
  .sidebar{position:fixed;left:-320px;top:64px;height:calc(100% - 80px);transition:left .22s ease;z-index:60;width:280px}
  .layout.sidebar-open .sidebar{left:12px}
  .overlay{position:fixed;inset:0;background:rgba(2,6,23,0.45);z-index:55}
  .hamburger{font-size:20px}
  .topnav{display:none}
  body{padding:0}
}

/* small screens adjustments */
@media (min-width:769px){
  .hamburger{display:none}
}
